<template>
  <div>
    <a-modal
      :title="isView?'年度计划查看':'新增年度计划'"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      width="70%"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-annualEvaluationPlanModal-Lu"
      @cancel="closeVisible"
      >
      <!--  -->
      <div>
        <a-form class="personal-info-form" :form="form" v-if="increaseVisible" :key="formKey">
          <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-yearPlan">
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    事项名称
                </span>
                <a-form-item ref="fkpmc" prop="fkpmc">
                  <span v-if="isView">{{ formState.fkpmc }}</span>
                    <a-input
                        v-else
                        v-model="formState.fkpmc"
                        placeholder="请输入事项名称"
                        v-decorator="[ 'fkpmc', {initialValue:formState.fkpmc,rules: rules.fkpmc}]"
                    />
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    附件
                </span>
                <a-form-item ref="fkpmc" prop="fkpmc">
                    <span style="margin-left: 10px;">
                      <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" :showUploadList="false" action="" @change="uploadClick">
                        <a-button v-if="!isView" class="blue-btn">选择文件<span style="color: red;">(仅限PDF)</span></a-button>
                      </a-upload>
                        <a href="#" style="margin-left: 5px;" v-if="formState.ffwfjdz" @click="downloadPdf(formState.ffwfjdz)">{{fileName}}</a>
                        <span style="margin-left: 5px;" v-else>{{fileName}}</span>
                    </span>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    年度
                </span>
                <a-form-item ref="fkpnd" prop="fkpnd">
                    <span v-if="isView">{{ formState.fkpnd?moment(formState.fkpnd).format('YYYY'):'' }}</span>
                    <!-- <a-date-picker v-else format="YYYY-MM-DD" @change="fkpjzrqChange" style="width: 100%;"
                    v-decorator="[ 'fkpjzrq', {initialValue:formState.fkpjzrq,rules: rules.fkpjzrq}]"/> -->
                    <a-date-picker
                      v-else
                      v-model="formState.fkpnd"
                      type="year"
                      mode="year"
                      format="YYYY"
                      placeholder="请输入年度"
                      @panelChange="panelChangeOne"
                      style="width: 100%;"
                      v-decorator="[ 'fkpnd', {initialValue:formState.fkpnd,rules: rules.fkpnd}]"/>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    报送截至日期
                </span>
                <a-form-item ref="fkpjzrq" prop="fkpjzrq">
                    <span v-if="isView">{{ formState.fkpjzrq?moment(formState.fkpjzrq).format('YYYY-MM-DD'):'' }}</span>
                    <a-date-picker v-else format="YYYY-MM-DD" @change="fkpjzrqChange" style="width: 100%;"
                    v-decorator="[ 'fkpjzrq', {initialValue:formState.fkpjzrq,rules: rules.fkpjzrq}]"/>
                </a-form-item>
            </a-descriptions-item>
            <!-- <a-descriptions-item>
                <span slot="label" class="descriptions-label-slot">
                    <span class="xhText" v-if="!isView">*</span>
                    考评人数
                </span>
                <a-form-item ref="fkprs" prop="fkprs">
                    <span v-if="isView">{{ formState.fkprs }}</span>
                    <a-input-number
                        v-else
                        v-model="formState.fkprs"
                        placeholder="请输入考评人数"
                        style="width: 100%;"
                        v-decorator="[ 'fkprs', {initialValue:formState.fkprs,rules: rules.fkprs}]"
                    />
                </a-form-item>
            </a-descriptions-item> -->
            <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    备注
                </span>
                <a-form-item ref="fbz" prop="fbz">
                    <span v-if="isView">{{ formState.fbz }}</span>
                    <a-textarea
                        v-else
                        v-model="formState.fbz"
                        :auto-size="{ minRows: 3}"
                        placeholder="请输入备注"/>
                </a-form-item>
            </a-descriptions-item>
          </a-descriptions>
          <div v-if="!isView" style="text-align: center;padding: 10px;">
            <a-button @click="saveHandle">保存</a-button>
            <a-button :loading="loading" class="blue-btn" style="margin-left: 10px;" @click="createHandle">生成人员</a-button>
          </div>
        </a-form>
        <commpVxeTable
          :key="reCommpVxeTable"
          :occupancyHeight="300"
          :conditionBtnRow="true"
          :config="dataTableConfig"
          :columns="columnsVxe"
          :formItem="formItem"
          @checkboxChange="checkboxChange"
          ref="administrativeOffice"
          @searchEvent="searchEvent"
          @resetEvent="resetEvent"
          >
          <template v-slot:externalOperations="{data}">
            <vxe-form-item>
              <template>
                <a-button :loading="loadingDe" v-if="!isView" class="red-btn" @click="deleteClick" icon="delete">移出名单</a-button>
              </template>
            </vxe-form-item>
          </template>
          <template v-slot:operation_fusermc="{row}" data-desc="姓名">
            <span style="padding-right: 21;" v-if="row.fusermc&&row.fusermc.length == 2">
                <span v-for="(trem,tI) in row.fusermc.split('')" :key="tI" >
                    {{trem}}
                    <span v-if="tI+1 !== row.fusermc.split('').length">&nbsp;&nbsp;</span>
                </span>
            </span>
            <span style="padding-right: 21;" v-else>{{ row.fusermc }}</span>
          </template>
          <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
              <a-form layout="inline">
                <a-form-item>
                  <a-button class="green-btn" @click="viewClick(row)" icon="eye">查看</a-button>
                </a-form-item>
              </a-form>
          </template>
        </commpVxeTable>
      </div>
      <template slot="footer" style="text-align: right;">
        <a-button v-if="!isView" :loading="loadingTj" class="blue-btn" @click="subHandle">提交</a-button>
        <a-button v-if="isView" class="blue-btn" @click="closeVisible">关闭</a-button>
      </template>
    </a-modal>
    <assessmentExaminationModal ref="assessmentExaminationRef" :processingData="processingData"></assessmentExaminationModal>
  </div>
</template>
<script>
import { deleteNpjhRy,initNpjhRy,ndjhRyPageList,ndjhSave,submitNdjh,uploadFile} from './service/index'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  assessCheckApi  from './service/api'
import moment from 'moment'
import assessmentExaminationModal from '../annualAssessment/register.vue'
export default {
  components: {
    commpVxeTable,assessmentExaminationModal
  },
  data() {
    return {
      increaseVisible: false,
      isView: false,
      form: this.$form.createForm(this, { name: 'cform' }),
      formState: {},
      formKey: null,
      moment,
      rules:{
        fkpmc: [{
            required: true,
            message: '请输入事项名称',
            trigger: 'blur',
        }],
        fkpjzrq: [{
            type: 'object',
            required: true,
            message: '请选择报送截至日期',
            trigger: 'blur',
        }],
        fkpnd: [{
            type: 'object',
            required: true,
            message: '请选择考评年度',
            trigger: 'blur',
        }],
        fkprs: [{
          type: 'number',
            required: true,
            message: '请输入考评人数',
            trigger: 'blur',
        }],
      },
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.ndjhRyPageList,
        rowId: 'id',
        paramet: {
          id: ''
        }
      },
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },{
          title: '姓名',
          field: 'fusermc',
          width: 100,
          titleInterval:true,
          slots: {
              header:'data1_header',
              default: 'operation_fusermc',
          }
        },{
          title: '工作单位',
          field: 'fgzdw',
        },{
          title: '总结报送',
          field: 'fsftjkh',
        },
        // {
        //   title: '是否参与考评',
        //   field: 'fsfcykp',
        // },{
        //   title: '实际审评次数',
        //   field: 'fsjjccs',
        // },{
        //   title: '担任组长次数',
        //   field: 'fdrzzcs',
        // },{
        //   title: '担任组员次数',
        //   field: 'fcjjccs',
        // },
        {
          title: '参加审评次数',
          field: 'fdrzzcs',
        },{
          title: '考核结果',
          field: 'fndzhkpjg',
        },{
            title: '操作',
            field: 'jobid',
            width: 100,
            titleInterval:true,
            slots: {
            // 使用插槽模板渲染
                header:'data3_header',
                default: 'operation_btn',
            },
        }
      ],
      formItem: [
        {
          label: '关键字',
          model: 'gjz',
        },
        {
            label: '是否总结报送',
            model: 'fsftjkh',
            type:'Select',
            options:[{
                label:'是',
                value:'是'
            },{
                label:'否',
                value:'否'
            }]
        },
      ],
      idList: [],
      loading: false,
      loadingTj: false,
      loadingDe: false,
      processingData:{},
      fileName: '未选择任何文件',
    }
  },
  methods: {
    getData(val,isview){
      this.isView = isview
      if(val.id){
        this.formState = val
        this.formState.fkpjzrq = val.fkpjzrq?moment(val.fkpjzrq):null
        this.formState.fkpnd = val.fkpnd?moment(val.fkpnd):null
        this.formState.ffwfjdz = val.ffwfjdz
        this.dataTableConfig.paramet = {
            id: this.formState.id
          }
        this.reCommpVxeTable = Date.now()
      } else {
      //console.log('{{{{{{{{{}}}}}}}}}')
        this.formState = {}
        this.dataTableConfig.paramet = {
            id: ''
          }
        this.reCommpVxeTable = Date.now()
      }
      this.formKey = Date.now()
    },
    closeVisible(){
      this.increaseVisible = false
      this.$emit('success')
    },
    fkpjzrqChange(date, dateString){
      this.formState.fkpjzrq = date?moment(date):null
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      //console.log(value)
        this.formState.fkpnd = moment(value)
        this.form.setFieldsValue({
          fkpnd: this.formState.fkpnd
        });
    },
    // 附件
    beforeUpload(e){
      return false
    },
    // 上传附件
    async uploadClick({file}){
      //console.log(file)
      if(!this.formState.id){
        let data = {}
        data = {
          id: '',
          fkpmc: this.formState.fkpmc,
          fkpjzrq: this.formState.fkpjzrq?moment(this.formState.fkpjzrq).format('YYYY-MM-DD'):'',
          fkpnd: this.formState.fkpnd?moment(this.formState.fkpnd).format('YYYY'):'',
          fbz: this.formState.fbz
        }
        const res = await ndjhSave(data)
        if (res.success) {
          this.formState.id = res.result.id
          this.uploadClicka(file,this.formState.id)
        }
      } else {
        this.uploadClicka(file,this.formState.id)
      }
    },
    uploadClicka(file,id){
      //console.log(file)
      var that = this
        if(file.type.indexOf('pdf') == -1){
          that.$message.warning('当前仅限上传PDF，请重新选择！')
          return
        }
        if(typeof file.uid !== 'undefined') {
          const fileData = new FormData();
          fileData.append("file",file);
          fileData.append("id",id);
          //console.log(fileData)
          uploadFile(fileData).then(res => {
            //console.log('fileData',res)
            if (res.success) {
              that.$message.success(res.message)
              that.fileName = that.formState.fkpmc?that.formState.fkpmc+'.pdf':'考评名称.pdf'
              that.formState.ffwfjdz = res.result.ffwfjdz
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {}
    },
    saveHandle(){
      let data = {
        id: this.formState.id?this.formState.id:'',
        fkpmc: this.formState.fkpmc,
        fkpjzrq: this.formState.fkpjzrq?moment(this.formState.fkpjzrq).format('YYYY-MM-DD'):'',
        fkpnd: this.formState.fkpnd?moment(this.formState.fkpnd).format('YYYY'):'',
        fbz: this.formState.fbz
      }
      ndjhSave(data).then(res => {
        //console.log()
        if(res.success){
          this.$message.success(res.message)
          this.formState.id = res.result.id
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    subHandle(){
      this.form.validateFields(async(err, values) => {
        if(!err){
          let that = this
          let data = {
            id: that.formState.id?that.formState.id:'',
            fkpmc: that.formState.fkpmc,
            fkpjzrq: that.formState.fkpjzrq?moment(that.formState.fkpjzrq).format('YYYY-MM-DD'):'',
            fkpnd: that.formState.fkpnd?moment(that.formState.fkpnd).format('YYYY'):'',
            fbz: that.formState.fbz
          }
          let resA = await ndjhSave(data)
          that.formState.id = resA.result.id
          that.$confirm({
            title: '您确定要提交吗?',
            content: '',
            okText: '确定',
            okType: 'info',
            cancelText: '取消',
            onOk() {
              let data = {
                id: that.formState.id,
                // fkpmc: that.formState.fkpmc,
                // fkpjzrq: moment(that.formState.fkpjzrq).format('YYYY-MM-DD'),
                // fkprs: that.formState.fkprs,
                // fbz: that.formState.fbz
              }
              that.loadingTj = true
              submitNdjh(data).then(res => {
                //console.log()
                if(res.success){
                  that.$message.success(res.message)
                  that.closeVisible()
                } else {
                  that.$message.warning(res.message)
                }
                that.loadingTj = false
              })
            },
            onCancel() {
              //console.log('Cancel');
            },
          });
        }
      })
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    // 重置
    resetEvent(){
      this.reCommpVxeTable = Date.now()
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
          val.forEach(item => {
              this.idList.push(item.id)
          });
      }
    },
    createHandle(){
      if(!this.formState.id){
        this.$message.warning('生成人员名单前，请先保存数据！')
      }
      this.loading = true
      initNpjhRy({id:this.formState.id}).then(res => {
        if(res.success){
          this.$message.success(res.message)
          this.dataTableConfig.paramet = {
            id: this.formState.id
          }
          this.reCommpVxeTable = Date.now(res.message)
        } else {
          this.$message.warning()
        }
        this.loading = false
      })
    },
    deleteClick(){
      if(this.idList.length == 0){
        this.$message.warning('请勾选数据！')
        return
      }
      let that = this
      that.$confirm({
        title: '您确定要移出当前人员名单吗?',
        content: '',
        okText: '确定',
        okType: 'warning',
        cancelText: '取消',
        onOk() {
          that.loadingDe = true
          deleteNpjhRy({ids: that.idList.toString()}).then(res => {
            if(res.code == 200){
              that.$message.success(res.message)
              that.resetEvent()
            } else {
              that.$message.warning(res.message)
            }
            that.loadingDe = false
          })
        },
        onCancel() {
          //console.log('Cancel');
        },
      });
    },
    viewClick(row){
      //console.log(row)
      this.processingData = {}
      this.processingData = {
        ...row,
        fhjmc: '我的已办',
        examine: true
      }
      this.$refs.assessmentExaminationRef.getData(this.processingData)
      this.$refs.assessmentExaminationRef.visible = true
    }
  },
}
</script>
<style lang="less">
  .form-annualEvaluationPlanModal-Lu {
    .ant-form-item {
      margin-bottom: 0px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: right;
        font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .descriptions-yearPlan {
        .descriptions-label-slot{
          display: flex;
          align-items: center;
          width: 123px !important;//确保左侧固定文字不会换行
          line-height: 2;
          text-align: center;
          justify-content: center;
      }
    }
    .descriptions-content-item {
        width: 100%;
        .ant-form-item-control-wrapper{
            width: 100%;
        }
      }
    .descriptions-row .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 100px !important;//确保左侧固定文字不会换行
    }
    .xhText{
        color: #f5222d;
        line-height: 36px;
        font-size: 21px;
        font-weight: 600;
        height: 30px;
    }
    // .ant-form-inline .ant-form-item-with-help{
    //     margin-bottom: 0px !important;
    // }
    // .zm-form-model{
    //     display: flex;
    //     .ant-form-item-control-wrapper{
    //         flex: 1;
    //     }
    // }
    // .ant-descriptions-bordered .ant-descriptions-row{
    //     border-bottom: 1px solid #e4e3e3;
    // }
    // .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
    //     border-right: 1px solid #e4e3e3;
    //     line-height: 3;
    //     min-width: 100px;
    // }
    // .ant-descriptions-bordered .ant-descriptions-view{
    //     border: 1px solid #e4e3e3;
    //     border-right: 0;
    // }
    // .ant-descriptions-row:last-child{
    //     border-bottom: 0;
    // }
  }
</style>
